<template>
  <div>
    <div style="height: 40px">
      <h1>挂号订单管理</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-shaixuan"></i>
        <span slot="title">筛选</span>
      </div>
      <div id="shaixuan_2">

        <span id="input">
          <el-input v-model="input"
                    placeholder="输入订单号或用户名"></el-input>
        </span>

        <span id="one">
          <span class="demonstration">&nbsp;&nbsp;&nbsp;日期</span>
          <el-date-picker v-model="value"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          align="right"
                          value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </span>
        <div id="button">
          <el-button type="primary"
                     @click="select()">筛选</el-button>
        </div>
      </div>
    </div>
    <div>
      <div class="shaixuan_1">&nbsp;
        <i class="iconfont icon-querylist"></i>
        <span slot="title">数据列表</span>
      </div>
      <div style="width:85%">
        <template>
          <el-tabs v-model="activeName"
                   @tab-click="handleClick"
                   stretch="true">
            <el-tab-pane label="全部"
                         name="first"></el-tab-pane>
            <el-tab-pane label="待支付"
                         name="second"></el-tab-pane>
            <el-tab-pane label="已完成"
                         name="third"></el-tab-pane>
            <el-tab-pane label="已取消"
                         name="fourth"></el-tab-pane>
            <el-tab-pane label="已退款"
                         name="fifth"></el-tab-pane>
          </el-tabs>
        </template>
      </div>
      <el-row>
        <el-row>
          <GuahaoData :tableData="tableData"
                      style="height:100%"></GuahaoData>
        </el-row>
      </el-row>

      <div id="page">
        <el-pagination background
                       layout="prev, pager, next"
                       :total="100">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
name:'GuahaoOrder'
import GuahaoData from './GuahaoData.vue'
export default {
  components: {
    GuahaoData,
  },
  name: 'GuahaoOrder',
  data() {
    return {
      activeName: 'first',
      input: '',
      value: '',
      tableData: '',
    }
  },
  methods: {
    handleClick(tab, event) {
      alert(tab.index)
      if (tab.index == 0) {
        this.created()
      } else {
        this.$axios
          .get('http://localhost:9527/guahao/state?state=' + tab.index)
          .then((res) => {
            console.log(res)
            this.tableData = res.data.data
          })
      }
    },
    select: function () {
      this.$axios
        .post(
          'http://localhost:9527/guahao/find?start=' +
            this.value[0] +
            '&end=' +
            this.value[1] +
            '&input=' +
            this.input
        )
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data
          console.log(this.tableData)
        })
    },
    created() {
      this.$axios.get('http://localhost:9527/guahao/findAll').then((res) => {
        console.log(res)
        this.tableData = res.data.data
      })
    },
  },
  created() {
    this.created()
  },
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#one {
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
